<template>
  <div class="cartcontrol">
    <transition name="move">
      <div class="iconfont icon-removecircleoutline" v-if="food.count" @click.stop="updateFoodCount(false)">-</div>
    </transition>
    <div class="cart-count" v-if="food.count">{{food.count}}</div>
    <div class="iconfont icon-addcircle" @click.stop="updateFoodCount(true)">
    	+
    	<transition 
    		@before-enter="beforeEnter"
    		@enter="Enter"
    		@after-enter="afterEnter"
    		
    		>
    	<div class="ball" v-show="flag"></div>
    </transition>
    </div>
  </div>
</template>
<style type="text/css">
	.ball{
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background-color: #008000;
		
	}
	
</style>
<script>
	//@click.stop阻止事件冒泡
export default {
	data (){
		return {
			flag:false
		}
	},
  props: {
    food: Object
  },
  methods: {
    updateFoodCount (isAdd) {
    	this.flag=!this.flag
      this.$store.dispatch('updateFoodCount', {isAdd, food: this.food})
    },
    beforeEnter(el){//动画之前 el 动画对象
    	el.style.transform='translate(0,0)'
    	
    },
    Enter(el,done){
    	el.offsetWidth
    	el.style.transform='translate(-280px,230px)'
    	el.style.transition="all 500ms ease"
    	done()
    },
    afterEnter(el){
    	this.flag=!this.flag
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixins.styl"
  .cartcontrol
    font-size: 0
    .cart-decrease
      display: inline-block
      padding: 6px
      line-height: 24px
      font-size: 24px
      color: rgb(0, 160, 220)
    .icon-removecircleoutline
      display: inline-block
      padding 6px
      line-height 24px
      font-size 24px
      color $green
      &.move-enter-active, &.move-leave-active
        transition all .3s
      &.move-enter, &.move-leave-to
        opacity 0
        transform translateX(15px) rotate(180deg)
    .cart-count
      display: inline-block
      vertical-align: top
      width: 12px
      padding-top: 6px
      line-height: 24px
      text-align: center
      font-size: 10px
      color: rgb(147, 153, 159)
    .icon-addcircle
      display: inline-block
      padding: 6px
      line-height: 24px
      font-size: 24px
      color $green
</style>